<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业微信消息转发系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .header {
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 30px;
        }
        .footer {
            padding-top: 20px;
            color: #777;
            border-top: 1px solid #e5e5e5;
            margin-top: 30px;
        }
        
        /* 响应式表格样式 */
        @media (max-width: 768px) {
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            #historyTable th:nth-child(3),
            #historyTable td:nth-child(3),
            #historyTable th:nth-child(4),
            #historyTable td:nth-child(4) {
                display: none;
            }
            
            .card .row > .col-md-4 {
                margin-bottom: 15px;
            }
        }
        
        @media (max-width: 576px) {
            #historyTable th:nth-child(2),
            #historyTable td:nth-child(2) {
                display: none;
            }
            
            .pagination {
                flex-wrap: wrap;
            }
            
            .pagination .page-item {
                margin-bottom: 5px;
            }
        }
        
        /* 状态徽章样式 */
        .badge {
            font-size: 0.85em;
        }
        
        /* 表格操作按钮样式 */
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        
        /* 筛选区域样式 */
        .card-header h5 {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>企业微信消息转发系统</h1>
            <p class="lead">配置企业微信应用并发送消息</p>
        </div>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="config-tab" data-bs-toggle="tab" data-bs-target="#config" type="button" role="tab" aria-controls="config" aria-selected="true">配置管理</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="message-tab" data-bs-toggle="tab" data-bs-target="#message" type="button" role="tab" aria-controls="message" aria-selected="false">发送消息</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controls="history" aria-selected="false">发送记录</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api" type="button" role="tab" aria-controls="api" aria-selected="false">API文档</button>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <!-- 配置管理 -->
            <div class="tab-pane fade show active" id="config" role="tabpanel" aria-labelledby="config-tab">
                <div class="my-3">
                    <button class="btn btn-primary" id="addConfigBtn">添加配置</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>企业ID</th>
                                <th>应用ID</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="configTableBody">
                            <!-- 配置列表将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 发送消息 -->
            <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="messageDestination" class="form-label">目的地</label>
                            <select class="form-select" id="messageDestination">
                                <!-- 目的地列表将通过JavaScript动态加载 -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="messageType" class="form-label">消息类型</label>
                            <select class="form-select" id="messageType">
                                <option value="text">文本消息</option>
                                <option value="markdown">Markdown消息</option>
                                <option value="news">图文消息</option>
                                <option value="template_card">模板卡片消息</option>
                            </select>
                        </div>
                        <div class="mb-3" id="contentGroup">
                            <label for="messageContent" class="form-label">消息内容</label>
                            <textarea class="form-control" id="messageContent" rows="5"></textarea>
                        </div>
                        <div class="mb-3 d-none" id="titleGroup">
                            <label for="messageTitle" class="form-label">标题</label>
                            <input type="text" class="form-control" id="messageTitle">
                        </div>
                        <div class="mb-3 d-none" id="descriptionGroup">
                            <label for="messageDescription" class="form-label">描述</label>
                            <textarea class="form-control" id="messageDescription" rows="3"></textarea>
                        </div>
                        <div class="mb-3 d-none" id="urlGroup">
                            <label for="messageUrl" class="form-label">跳转链接</label>
                            <input type="text" class="form-control" id="messageUrl">
                        </div>
                        <div class="mb-3 d-none" id="picUrlGroup">
                            <label for="messagePicUrl" class="form-label">图片链接</label>
                            <input type="text" class="form-control" id="messagePicUrl">
                        </div>
                        <button class="btn btn-primary" id="sendMessageBtn">发送消息</button>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                消息预览
                            </div>
                            <div class="card-body">
                                <div id="messagePreview">
                                    <!-- 消息预览将通过JavaScript动态加载 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发送记录 -->
            <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                <div class="row mt-3">
                    <div class="col-md-12">
                        <!-- 筛选区域 -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="mb-0">筛选条件</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="filterStatus" class="form-label">发送状态</label>
                                            <select class="form-select" id="filterStatus">
                                                <option value="all">全部</option>
                                                <option value="SUCCESS">成功</option>
                                                <option value="FAILED">失败</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="filterDestination" class="form-label">发送目的地</label>
                                            <select class="form-select" id="filterDestination">
                                                <option value="all">全部</option>
                                                <!-- 目的地列表将通过JavaScript动态加载 -->
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label class="form-label">&nbsp;</label>
                                            <div class="d-grid">
                                                <button class="btn btn-primary" id="applyFilterBtn">应用筛选</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 发送记录表格 -->
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">发送记录</h5>
                                <button class="btn btn-sm btn-outline-secondary" id="refreshHistoryBtn">
                                    刷新
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" id="historyTable">
                                        <thead>
                                            <tr>
                                                <th>时间戳</th>
                                                <th>目的地</th>
                                                <th>消息类型</th>
                                                <th>内容摘要</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="historyTableBody">
                                            <!-- 发送记录将通过JavaScript动态加载 -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <span id="historyPaginationInfo">显示 0 条记录</span>
                                    <nav>
                                        <ul class="pagination mb-0" id="historyPagination">
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                                            </li>
                                            <li class="page-item active">
                                                <a class="page-link" href="#">1</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#">下一页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- API文档 -->
            <div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
                <div class="mt-3">
                    <h3>API文档</h3>
                    <div class="accordion" id="apiAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    发送消息 API
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <h5>1. 发送文本消息</h5>
                                    <pre><code>POST /api/message/text?destinationId={destinationId}
Content-Type: text/plain

消息内容</code></pre>

                                    <h5>2. 发送Markdown消息</h5>
                                    <pre><code>POST /api/message/markdown?destinationId={destinationId}
Content-Type: text/plain

# 标题
**加粗文本**
> 引用文本</code></pre>

                                    <h5>3. 发送图文消息</h5>
                                    <pre><code>POST /api/message/news?destinationId={destinationId}
Content-Type: application/json

{
  "title": "消息标题",
  "description": "消息描述",
  "url": "https://example.com",
  "picUrl": "https://example.com/image.jpg"
}</code></pre>

                                    <h5>4. 发送模板卡片消息</h5>
                                    <pre><code>POST /api/message/template_card?destinationId={destinationId}
Content-Type: application/json

{
  "title": "消息标题",
  "description": "消息描述",
  "url": "https://example.com"
}</code></pre>

                                    <h5>5. 通用消息发送接口</h5>
                                    <pre><code>POST /api/message?destinationId={destinationId}
Content-Type: application/json

{
  "messageType": "text|markdown|news|template_card",
  "content": "消息内容",
  "title": "消息标题",
  "description": "消息描述",
  "url": "https://example.com",
  "picUrl": "https://example.com/image.jpg"
}</code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    配置管理 API
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <h5>1. 获取所有配置</h5>
                                    <pre><code>GET /api/config</code></pre>

                                    <h5>2. 获取指定配置</h5>
                                    <pre><code>GET /api/config/{id}</code></pre>

                                    <h5>3. 添加配置</h5>
                                    <pre><code>POST /api/config
Content-Type: application/json

{
  "name": "配置名称",
  "corpId": "企业ID",
  "agentId": 应用ID,
  "secret": "应用密钥",
  "enabled": true,
  "remark": "备注"
}</code></pre>

                                    <h5>4. 更新配置</h5>
                                    <pre><code>PUT /api/config/{id}
Content-Type: application/json

{
  "name": "配置名称",
  "corpId": "企业ID",
  "agentId": 应用ID,
  "secret": "应用密钥",
  "enabled": true,
  "remark": "备注"
}</code></pre>

                                    <h5>5. 删除配置</h5>
                                    <pre><code>DELETE /api/config/{id}</code></pre>

                                    <h5>6. 测试配置</h5>
                                    <pre><code>GET /api/config/test/{id}</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>&copy; 2025 企业微信消息转发系统</p>
        </div>
    </div>

    <!-- 添加/编辑配置模态框 -->
    <div class="modal fade" id="configModal" tabindex="-1" aria-labelledby="configModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="configModalLabel">添加配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="configForm">
                        <input type="hidden" id="configId">
                        <div class="mb-3">
                            <label for="configName" class="form-label">配置名称</label>
                            <input type="text" class="form-control" id="configName" required>
                        </div>
                        <div class="mb-3">
                            <label for="configCorpId" class="form-label">企业ID</label>
                            <input type="text" class="form-control" id="configCorpId" required>
                        </div>
                        <div class="mb-3">
                            <label for="configAgentId" class="form-label">应用ID</label>
                            <input type="number" class="form-control" id="configAgentId" required>
                        </div>
                        <div class="mb-3">
                            <label for="configSecret" class="form-label">应用密钥</label>
                            <input type="text" class="form-control" id="configSecret" required>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="configEnabled" checked>
                            <label class="form-check-label" for="configEnabled">启用</label>
                        </div>
                        <div class="mb-3">
                            <label for="configRemark" class="form-label">备注</label>
                            <textarea class="form-control" id="configRemark" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveConfigBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/main.js"></script>
</body>
</html>